<template>
  <demoBlock title="表单项类型">
    <vcu-form @submit="onSubmit">
      <vcu-cell-group>
        <vcu-input name="switch" label="开关">
          <template #input>
            <vcu-switch v-model="switchChecked" size="20" />
          </template>
        </vcu-input>

        <vcu-input name="checkbox" label="复选框">
          <template #input>
            <vcu-checkbox v-model="checkbox" shape="square" />
          </template>
        </vcu-input>

        <vcu-input name="checkboxGroup" label="复选框组">
          <template #input>
            <vcu-checkbox-group v-model="checkboxGroup" direction="horizontal">
              <vcu-checkbox name="1" shape="square"> 复选框1 </vcu-checkbox>
              <vcu-checkbox name="2" shape="square"> 复选框2 </vcu-checkbox>
            </vcu-checkbox-group>
          </template>
        </vcu-input>

        <vcu-input name="radio" label="单选框">
          <template #input>
            <vcu-radio-group v-model="radio" direction="horizontal">
              <vcu-radio name="1">单选框 1</vcu-radio>
              <vcu-radio name="2">单选框 2</vcu-radio>
            </vcu-radio-group>
          </template>
        </vcu-input>

        <vcu-input name="number" label="数字选择器">
          <template #input>
            <vcu-number v-model="number" />
          </template>
        </vcu-input>

        <vcu-input name="rate" label="评分">
          <template #input>
            <vcu-rate v-model="rate" />
          </template>
        </vcu-input>

        <vcu-input name="slider" label="滑块">
          <template #input>
            <vcu-slider v-model="slider" />
          </template>
        </vcu-input>

        <vcu-input name="uploader" label="文件上传">
          <template #input>
            <vcu-uploader v-model="uploader" max-count="2" />
          </template>
        </vcu-input>

        <vcu-input
          v-model="pickerResult"
          is-link
          readonly
          name="picker"
          label="选择器"
          @click="showPicker = true"
        />

        <vcu-input
          v-model="datetimePickerResult"
          is-link
          readonly
          name="datetimePicker"
          label="时间选择"
          @click="showDatetimePicker = true"
        />

      </vcu-cell-group>

      <div style="margin: 16px 16px 0">
        <vcu-button round block type="primary" native-type="submit">
          提交
        </vcu-button>
      </div>
    </vcu-form>

    <!-- 选择器 -->
    <vcu-popup
      v-model:show="showPicker"
      round
      position="bottom"
      teleport="body"
    >
      <vcu-picker
        :columns="pickerColumns"
        @confirm="onConfirmPicker"
        @cancel="onCancelPicker"
      />
    </vcu-popup>

    <!-- 时间选择 -->
    <vcu-popup
      v-model:show="showDatetimePicker"
      round
      position="bottom"
      teleport="body"
    >
      <vcu-datetime-picker
        type="time"
        @confirm="onConfirmDatetimePicker"
        @cancel="onCancelDatetimePicker"
      />
    </vcu-popup>

  </demoBlock>
</template>

<script>
import { defineComponent, ref, getCurrentInstance } from "vue";
export default defineComponent({
  setup() {
    const { proxy } = getCurrentInstance();

    const rate = ref(3);
    const radio = ref("1");
    const slider = ref(50);
    const number = ref(1);
    const uploader = ref([{ url: `${proxy.serverIp}/images/err_page.png` }]);
    const checkbox = ref(false);
    const checkboxGroup = ref([]);
    const switchChecked = ref(false);

    const onSubmit = (values) => {
      console.log(values);
    };

    const pickerResult = ref("");
    const showPicker = ref(false);
    const pickerColumns = ["杭州", "宁波", "温州", "嘉兴", "湖州"];
    const onConfirmPicker = (value) => {
      pickerResult.value = value;
      showPicker.value = false;
    };

    const onCancelPicker = () => {
      showPicker.value = false;
    };

    const datetimePickerResult = ref("");
    const showDatetimePicker = ref(false);

    const onConfirmDatetimePicker = (time) => {
      datetimePickerResult.value = time;
      showDatetimePicker.value = false;
    };

    const onCancelDatetimePicker = () => {
      showDatetimePicker.value = false;
    };

    
    return {
      rate,
      radio,
      slider,
      number,
      uploader,
      checkbox,
      checkboxGroup,
      switchChecked,
      onSubmit,

      pickerResult,
      showPicker,
      pickerColumns,
      onConfirmPicker,
      onCancelPicker,

      datetimePickerResult,
      showDatetimePicker,
      onConfirmDatetimePicker,
      onCancelDatetimePicker,

    };
  },
});
</script>
